<template>
  <div class="container">
    <div class="nav" :class="transition ? 'tran-nav' : ''">
      <ul>
        <li @click="gotoHome">首页</li>
        <li @click="gotoWorks">作品</li>
        <li @click="gotoDiary">日记</li>
        <li @click="gotoContact">联系</li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import router from "@/router";
const transition = ref(false);

const gotoHome = () => {
  router.push("/");
};
const gotoWorks = () => {
  router.push("/works");
};
const gotoDiary = () => {
  router.push("/diary");
};
const gotoContact = () => {
  router.push("/contact");
};

onMounted(() => {
  setTimeout(() => {
    transition.value = true;
  }, 100);
});
</script>

<style lang="scss" scoped>
.container {
  .nav {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 60px;
    background: #fff;
    opacity: 0;
    box-shadow: 0 0 6px rgba($color: #7a7979, $alpha: 0.2);
    top: 0;
    ul {
      display: flex;
      justify-content: flex-end;
      list-style-type: none;
      line-height: 60px;
      li {
        margin: 0 40px;
        cursor: pointer;
        font-size: 14px;
        color: #7a7979;
        letter-spacing: 1px;
      }
      @media screen and (max-width: 600px) {
        li {
          margin: 0 10px;
        }
      }
    }
  }
  .tran-nav {
    opacity: 1;
    transition: opacity 0.4s ease 0s;
  }
}
</style>